<template>
  <div class="box">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
      <van-pull-refresh v-model="refreshing">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('没有更多数据了')"
          :error-text="$t('没有更多数据了')"
          @load="getList"
        >
          <van-cell
            v-for="(item, index) in helpList"
            :key="index"
            class="item"
            @click="goOther(item.help_id)"
          >
            <div>
              <p class="title">{{ item.title }}</p>
              <p class="time">{{ item.time }}</p>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "helper",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("帮助中心"),
        close: false,
        btn: "",
      },
      loading: false,
      finished: false,
      error: false,
      refreshing: false,
      pageSize: 10,
      pageNumber: 0,
      totalElements: 0,
      helpList: [],
    };
  },

  mounted() {
    // this.getList();
  },

  methods: {
    // 跳转帮助中心详情
    goOther(id) {
      this.$router.push("/helperDetail?id=" + id);
    },
    // 获取列表
    getList() {
      // if (this.refreshing) {
      //   this.helpList = [];
      //   this.pageNumber = 0;
      //   this.refreshing = false;
      // }
      let data = {
        page: this.pageNumber,
        rows: this.pageSize,
        language: String(this.$i18n.locale).toUpperCase(),
      };
      $postAxios(api.getHelpList, data, (res) => {
        if (res.code == 0) {
          this.totalElements = res.count;
          if (this.pageNumber == 0) {
            this.helpList = res.data;
          } else {
            this.helpList = this.helpList.concat(res.data);
          }
          this.loading = false;
          this.pageNumber++;
          if (this.helpList.length == this.totalElements) {
            this.finished = true;
          }
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #21212b;
  .content {
    padding: 10px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .item {
      margin-bottom: 10px;
      padding: 16px;
      border-radius: 11px;
      background: #262633 url("../../assets/images/newImg/arrow_right.png") no-repeat
        right 14px center;
      background-size: 6px auto;
      .title {
        margin-bottom: 5px;
      }
      p {
        color: #fff;
        font-size: 12px;
      }
    }
  }
}
</style>